<template>
  <div class="space-y-6">
    <div class="text-center">
      <h2 class="text-2xl font-bold mb-2">个人文件</h2>
      <p class="text-gray-500">管理您的所有文件</p>
    </div>

    <!-- 重要提示 -->
    <el-alert
      title="重要提示：超过3个月没有修改过的ER图将会被自动删除"
      type="warning"
      :closable="false"
      show-icon
    />

    <!-- 搜索栏 -->
    <div class="flex items-center space-x-4">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索文件名称..."
        class="flex-1"
      />
      <el-button type="primary" @click="searchFiles">搜索</el-button>
    </div>

    <!-- 文件列表 -->
    <div class="bg-white rounded-lg shadow-sm">
      <div v-if="filteredFiles.length === 0" class="text-center py-20">
        <el-icon :size="64" color="#C0C4CC" class="mb-4">
          <DocumentCopy />
        </el-icon>
        <p class="text-gray-500 mb-4">暂无文件</p>
        <el-button type="primary" @click="uploadFile">上传文件</el-button>
      </div>

      <div v-else>
        <!-- 文件网格布局 -->
        <div class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div 
              v-for="file in paginatedFiles" 
              :key="file.id"
              class="file-card bg-white border border-gray-200 rounded-lg overflow-hidden cursor-pointer"
            >
              <!-- 文件预览区域 -->
              <div class="relative aspect-rectangle bg-gray-50 overflow-hidden group">
                <!-- 图片预览 -->
                <div 
                  v-if="file.type === 'image'"
                  class="relative w-full h-full"
                >
                  <el-image
                    :src="file.thumbnail"
                    :alt="file.name"
                    fit="cover"
                    class="w-full h-full cursor-pointer transition-transform duration-300 group-hover:scale-110"
                    :preview-src-list="[file.fullImage || file.thumbnail]"
                    :initial-index="0"
                    preview-teleported
                    :hide-on-click-modal="true"
                    :z-index="3000"
                  />
                  <!-- 悬浮遮罩层 -->
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-300 flex items-center justify-center pointer-events-none">
                    <el-icon 
                      :size="32" 
                      color="white" 
                      class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    >
                      <View />
                    </el-icon>
                  </div>
                </div>

                <!-- ER图预览 -->
                <div 
                  v-else-if="file.type === 'er-diagram'"
                  class="relative w-full h-full bg-white p-4"
                >
                  <el-image
                    :src="file.thumbnail"
                    :alt="file.name"
                    fit="contain"
                    class="w-full h-full cursor-pointer transition-transform duration-300 group-hover:scale-105"
                    :preview-src-list="[file.fullImage || file.thumbnail]"
                    :initial-index="0"
                    preview-teleported
                    :hide-on-click-modal="true"
                    :z-index="3000"
                  />
                  <!-- 悬浮遮罩层 -->
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center pointer-events-none">
                    <el-icon 
                      :size="32" 
                      color="white" 
                      class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    >
                      <View />
                    </el-icon>
                  </div>
                </div>

                <!-- 其他文件类型 -->
                <div 
                  v-else
                  class="w-full h-full flex items-center justify-center bg-gray-100"
                >
                  <el-icon :size="48" color="#9CA3AF">
                    <Document />
                  </el-icon>
                </div>
              </div>

              <!-- 文件信息 -->
              <div class="p-4">
                <h3 class="font-medium text-gray-900 mb-1 truncate" :title="file.name">
                  {{ file.name }}
                </h3>
                <p class="text-sm text-gray-500 mb-3">
                  创建时间：{{ file.createTime }}
                </p>
                <el-button 
                  type="primary" 
                  size="small" 
                  class="w-full"
                  @click="viewFileDetails(file)"
                >
                  <el-icon class="mr-1"><View /></el-icon>
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between p-4 border-t border-gray-200">
          <span class="text-sm text-gray-500">共 {{ filteredFiles.length }} 条</span>
          <div class="flex items-center space-x-4">
            <el-select v-model="pageSize" size="small" style="width: 100px" @change="handlePageSizeChange">
              <el-option label="9条/页" :value="9" />
              <el-option label="12条/页" :value="12" />
              <el-option label="16条/页" :value="16" />
              <el-option label="20条/页" :value="20" />
            </el-select>
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :total="filteredFiles.length"
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              small
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { DocumentCopy, Document, View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索和分页
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(9)

// 模拟文件数据
const files = ref([
  {
    id: 1,
    name: '未命名',
    type: 'image',
    size: '2.5MB',
    createTime: '2025-06-10 14:33:23',
    updateTime: '2025-06-10 14:33:23',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/02/word表格制作海报.jpg',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/02/word表格制作海报.jpg'
  },
  {
    id: 2,
    name: '学生管理系统ER图',
    type: 'image',
    size: '1.8MB',
    createTime: '2025-06-09 10:20:15',
    updateTime: '2025-06-09 15:45:30',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/01/智能生成用例说明生成结果.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/01/智能生成用例说明生成结果.png'
  },
  {
    id: 3,
    name: '电商系统数据库设计',
    type: 'image',
    size: '1.5MB',
    createTime: '2025-06-08 16:12:45',
    updateTime: '2025-06-08 18:30:22',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 4,
    name: '系统架构图',
    type: 'image',
    size: '1.5MB',
    createTime: '2025-06-07 09:30:12',
    updateTime: '2025-06-07 11:15:45',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 5,
    name: '用户流程图',
    type: 'image',
    size: '2.1MB',
    createTime: '2025-06-06 14:25:33',
    updateTime: '2025-06-06 16:40:18',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 6,
    name: '数据库文档',
    type: 'document',
    size: '856KB',
    createTime: '2025-06-05 11:45:22',
    updateTime: '2025-06-05 13:20:15',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 7,
    name: '项目需求文档',
    type: 'document',
    size: '1.2MB',
    createTime: '2025-06-04 08:15:45',
    updateTime: '2025-06-04 17:30:12',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 8,
    name: '界面设计稿',
    type: 'image',
    size: '4.5MB',
    createTime: '2025-06-03 13:20:18',
    updateTime: '2025-06-03 15:45:33',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 9,
    name: '测试报告',
    type: 'document',
    size: '678KB',
    createTime: '2025-06-02 10:30:45',
    updateTime: '2025-06-02 12:15:22',
    thumbnail: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png',
    fullImage: 'https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png'
  },
  {
    id: 10,
    name: '产品原型图',
    type: 'image',
    size: '3.8MB',
    createTime: '2025-06-01 16:45:12',
    updateTime: '2025-06-01 18:20:45',
    thumbnail: '/placeholder.svg?height=400&width=400',
    fullImage: '/placeholder.svg?height=1600&width=1600'
  },
  {
    id: 11,
    name: '数据流程图',
    type: 'er-diagram',
    size: '2.8MB',
    createTime: '2025-05-31 11:30:25',
    updateTime: '2025-05-31 14:15:40',
    thumbnail: '/placeholder.svg?height=400&width=400',
    fullImage: '/placeholder.svg?height=1200&width=1200'
  },
  {
    id: 12,
    name: '系统部署图',
    type: 'image',
    size: '3.5MB',
    createTime: '2025-05-30 09:45:18',
    updateTime: '2025-05-30 16:20:33',
    thumbnail: '/placeholder.svg?height=400&width=400',
    fullImage: '/placeholder.svg?height=1500&width=1500'
  }
])

// 过滤后的文件列表
const filteredFiles = computed(() => {
  if (!searchKeyword.value.trim()) {
    return files.value
  }
  return files.value.filter(file => 
    file.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

// 分页后的文件列表
const paginatedFiles = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredFiles.value.slice(start, end)
})

// 方法
const searchFiles = () => {
  currentPage.value = 1
  ElMessage.info(`搜索关键词: ${searchKeyword.value || '全部文件'}`)
}

const uploadFile = () => {
  ElMessage.info('文件上传功能开发中...')
}

const viewFileDetails = (file: any) => {
  if (file.type === 'image' || file.type === 'er-diagram') {
    // 对于图片和ER图，点击查看详情按钮也会触发图片预览
    // 由于我们已经在图片上设置了预览功能，这里可以模拟点击图片
    ElMessage.info(`查看 ${file.name} 的详细信息`)
  } else {
    ElMessage.info(`查看文件: ${file.name}`)
  }
}

const handlePageSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
}
</script>

<style scoped>
.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.aspect-rectangle {
  aspect-ratio: 4 / 3;
}

/* 文件卡片悬浮效果 */
.file-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.file-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 10;
}

/* 响应式调整 - 最多3列 */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 自定义图片预览样式 */
:deep(.el-image-viewer__wrapper) {
  background-color: rgba(0, 0, 0, 0.8);
}

:deep(.el-image-viewer__btn) {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

:deep(.el-image-viewer__btn:hover) {
  background-color: rgba(0, 0, 0, 0.8);
}

:deep(.el-image-viewer__close) {
  color: white;
}

:deep(.el-image-viewer__canvas) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-image-viewer__img) {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
</style>
